<template>
  <van-popup
    v-model:show="shows"
    position="right"
    :zIndex="zIndex"
    :style="{ height: '100%', width: '100%' }"
  >
    <div class="contents">
      <van-nav-bar title="航班查询" left-arrow @click-left="onClickLeft" />
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="forms.flight_num"
            :label-width="100"
            label="航班号"
            name="flight_num"
            autocomplete="off"
            placeholder="如CA1662"
            :rules="[{ required: true, message: '请输入航班号' }]"
          />
          <van-field
            v-model="forms.flight_date"
            :label-width="100"
            label="航班日期"
            @click="checkFullTime"
            name="flight_date"
            placeholder="请选择航班日期"
            autocomplete="off"
            disabled
            :rules="[{ required: true, message: `请选择航班日期` }]"
          />
        </van-cell-group>
        <p class="search-info">*国际航班请按照出发城市当地起飞日期查询</p>
        <div style="margin: 0.5rem;">
          <van-button round block type="primary" native-type="submit">
            查询
          </van-button>
        </div>
      </van-form>
    </div>
  </van-popup>
  <van-popup
    v-model:show="showAir"
    position="bottom"
    round
    :style="{ height: '50%', zIndex: 99999 }"
  >
    <div class="air-wraper">
      <p class="bt">
        查询到 <b>{{ forms.flight_num }}</b> 航班信息：
      </p>
      <div class="air-content">
        <template v-if="airList.length">
          <div
            class="air-item"
            v-for="(jtem, j) in airList"
            :key="j + 'airList'"
            @click="onchange(jtem)"
          >
            <div class="air-top">航班号：{{ jtem.flight_no }}</div>
            <div class="air-cont">
              <van-row>
                <!--                出发-->
                <van-col span="9">
                  <div class="air-name">{{ jtem.flight_dep_airport }}</div>
                  <div class="air-time">
                    {{ jtem.flight_deptime_plan_date }}
                  </div>
                </van-col>
                <van-col span="6">
                  <div style="text-align: center">
                    <img :src="airLine" />
                  </div>
                </van-col>
                <!--                到达-->
                <van-col span="9">
                  <div class="air-name">{{ jtem.flight_arr_airport }}</div>
                  <div class="air-time">
                    {{ jtem.flight_arrtime_plan_date }}
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="no-data">
            <van-empty description="未获取到该航班信息" />
          </div>
        </template>
      </div>
    </div>
  </van-popup>
  <!--  选择时间-->
  <FullTime
    v-model:show="showFullTime"
    :minDate="timesParam.minDate"
    :maxDate="timesParam.maxDate"
    :defaultTime="timesParam.defaultTime"
    :zIndex="zIndex"
    dateType="date"
    v-if="showFullTime"
    @change="changeFullTime"
  >
  </FullTime>
</template>

<script>
import FullTime from "/@/components/FullTime/FullTime.vue";
import { getCurrentInstance, reactive, toRefs, watch } from "vue";
import { addDays, format } from "date-fns";
import airLine from "./img/air-line.png";
import { Toast } from "vant";

export default {
  name: "SearchAir",
  components: { FullTime },
  props: {
    show: Boolean, // 是否显示
    zIndex: {
      type: Number,
      default: () => {
        return 1000;
      }
    }
  },
  emits: ["update:show", "change"],
  setup(props) {
    const { proxy } = getCurrentInstance();
    const pageData = reactive({
      cityData: [],
      shows: props.show,
      showFullTime: false,
      showAir: false,
      airLine: airLine,
      airList: [],
      history: {},
      timesParam: {
        // 传入预约时间的最大时间和最小时间
        minDate: new Date(),
        maxDate: addDays(new Date(), 3),
        defaultTime: new Date()
      },
      forms: {
        flight_num: "",
        flight_date: ""
      }
    });
    // HU7188
    // 打开补录弹窗
    watch(
      () => props.show,
      item => {
        pageData.shows = item;
      },
      { immediate: true }
    );
    const pageMethods = {
      onClickLeft() {
        proxy.$emit("update:show", false);
      },
      checkFullTime() {
        // 打开时间选择控件
        pageData.showFullTime = true;
      },
      changeFullTime(time) {
        // 时间回调
        pageData.forms.flight_date = format(time, "yyyy-MM-dd");
      },
      onchange(data) {
        pageData.showAir = false;
        pageMethods.onClickLeft();
        proxy.$emit("change", data);
      },
      async onSubmit(data) {
        if (pageData.history[JSON.stringify(pageData.forms)]) {
          pageData.airList = pageData.history[JSON.stringify(pageData.forms)];
          pageData.showAir = true;
          return;
        }
        // 提交啊
        const res = await proxy.$axiosJson(
          "/security/v1/icardcOrder/queryFlight",
          pageData.forms
        );
        if (res.biz_result === "SUCCESS" && res.ret_code === "10000") {
          const resData = res.data || {};
          pageData.airList = resData.flight_bean_list || [];
          if (!pageData.airList.length) Toast("未获取到航班信息");
          pageData.airList.length &&
            (pageData.history[JSON.stringify(pageData.forms)] =
              pageData.airList);
          pageData.showAir = true;
        } else {
          Toast(res.ret_msg || "未获取到航班信息");
        }
      }
    };
    return {
      ...toRefs(pageData),
      ...pageMethods
    };
  }
};
</script>

<style scoped lang="less">
.search-info {
  color: #999999;
  margin: 20px 10px;
  font-size: 12px !important;
}
:deep(.van-field__control) {
  color: #323233 !important;
  -webkit-text-fill-color: unset;
}
:deep(input.van-field__control::-webkit-input-placeholder) {
  color: #c8c9cc !important;
}
:deep(.van-cell__title) {
  color: #666666 !important;
}
.air-wraper {
  background: #f8f8f8;
  font-size: 14px;
  height: 100%;
  .air-content {
    padding: 10px;
  }
  .bt {
    background: #ffffff;
    padding: 15px 10px;
    color: #666666;
    font-size: 14px;
    b {
      font-weight: bold;
    }
  }
  .air-item {
    padding: 10px;
    border-radius: 5px;
    background: #ffffff;
    margin-top: 15px;
    border: 1px solid #eeeeee;
    .air-top {
      font-weight: 600;
      color: #000000;
    }
    .air-cont {
      margin-top: 15px;
    }
    .air-name {
      font-size: 13px;
      color: #333333;
      font-weight: 600;
      text-align: center;
    }
    .air-time {
      font-size: 10px;
      margin-top: 10px;
      font-color: #666666;
      text-align: center;
    }
  }
  .air-item:first-child {
    margin-top: 0;
  }
}
</style>
